<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { Editor as WangEditor, Toolbar } from '@wangeditor/editor-for-vue'
import defaultConfig from './config.js'

const emits = defineEmits(['editBody'])
const props = defineProps({
    body: { type: String, default: '' }//内容
})

const status = reactive({
    focusClass: '',
    mode: 'default', // default 或 simple
})
const data = reactive({
    body: props.body
})
const editorRef = shallowRef()//编辑器控件

onMounted(() => {
    //如果props数据通过ajax请求,数据会在页面执行完了后再传入
    //这里加入一个监听确保ajax数据传入,主页重置数据时也需要监听并修改
    watch(() => props.body, () => {
        if (typeof props.body != 'string') {
            data.body = ''
        } else {
            data.body = props.body
        }
    })
})
onBeforeUnmount(() => {
    // 组件销毁时，也及时销毁编辑器
    editorRef.value.destroy()
})
</script>

<template>
    <div class="wangEditor-boxfocus" :class="status.focusClass">
        <div class="box">
            <Toolbar class="bar" :editor="editorRef" :mode="status.mode" />
            <WangEditor class="edit" style="height: 300px;" v-model="data.body" :defaultConfig="defaultConfig" :mode="status.mode" @onCreated="(editor) => { editorRef = editor }" @onFocus="() => { status.focusClass = 'focus' }" @onBlur="() => { status.focusClass = '' }" @onChange="(editor) => { emits('editBody', editor.getHtml()) }" />
        </div>
    </div>
</template>

<style lang="scss">
//获得焦点
.wangEditor-boxfocus.focus {
    &:hover {
        box-shadow: 0 0 0 1px var(--el-color-primary) inset;
    }
    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}
//外样式
.wangEditor-boxfocus {
    max-width: 800px;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
    transition: var(--el-transition-box-shadow);
    padding: 2px;
    &:hover {
        box-shadow: 0 0 0 1px var(--el-text-color-disabled) inset
    }
    // 默认样式修改
    .box {
        background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
        .bar {
            border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
            border-bottom: 1px solid var(--el-input-border-color, var(--el-border-color))
        }
        .edit {
            font-size: 16px;
            line-height: 1.5;
            //上传进度条
            .w-e-progress-bar {
                height: 2px;
            }
            //视频控件
            .w-e-textarea-video-container {
                padding: 0px;
                margin: 0px;
                background: none;
                border: none;
                display: flex;
                justify-content: center;
                video {
                    max-width: 100%;
                }
            }
        }
    }
    // 全屏样式
    .box.w-e-full-screen-container {
        z-index: 11;
        .bar {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .edit {
            background-color: rgb(245, 245, 245);
            overflow-y: scroll;
            .w-e-text-placeholder {
                padding: 30px 50px 50px 50px;
            }
            .w-e-text-container {
                width: 850px;
                height: auto;
                margin: 30px auto 100px auto;
                border: 1px solid #e8e8e8;
                box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
                .w-e-scroll {
                    padding: 30px 50px 50px 50px;
                }
                div[data-slate-editor] {
                    min-height: 1500px;
                }
            }
        }
    }
}
</style>
